<template>
    <div>
        <div class="list">
            <div class="item-wrapper"  v-for="(person, index) of list" :key="index">
                <div class="item">
                    <img :src="imgUrl" class="item-img">
                    <div class="item-info">
                        <span class="item-no">编号:{{index + 1}}</span>
                        <div class="item-desc" v-for="(item, index, key) of person.cInfo" :key="key">
                        <span class="item-desc-title">{{index}} :</span>
                        <span :class="{file: key >= listTitle.length - flen}"
                            @click = "handlelookClick(item, key)">
                            {{item}}</span>
                        </div>
                        <div v-if="show">
                           <!-- <div v-if="true"> -->
                            <button class="item-button" @click="handleVoteClick('11', person.cId, index, $event)">同意</button>
                            <button class="item-button" @click="handleVoteClick('01', person.cId, index, $event)">弃权</button>
                            <button class="item-button" @click="handleVoteClick('00', person.cId, index, $event)">反对</button>
                            <!-- 点击后改变样式:class="{activate: }" -->
                             <!-- <p class="btn-info" v-if="this.info">{{info}}</p> -->
                        </div>
                        <div class="item-desc" v-else>
                            <input class=" ipt item-desc" type="text" :ref="index"
                            placeholder="请输入分数"
                            v-model="tmp[index]"
                            @blur="handleJudgeBlur(person.cId, tmp[index], index)"
                            @focus="handleJudgeClick"
                           >
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 投票 -->
        <div v-if="show"  class="submit" @click="handleSubmit">提交 完成投票</div>
        <!-- 评分· -->
        <div v-if="!show"  class="submit" @click="handleSubClick">提交 完成投票</div>
        <div class="list-bottom">没有更多了</div>
    </div>
</template>

<script>
import pdf from 'vue-pdf'
import axios from 'axios'
// import { shell } from 'electron'
import { mapState } from 'Vuex'
export default {
  name: 'HomeList',
  props: {
    list: Array,
    schema: String,
    listTitle:Array,
    flen: Number
  },
  computed: {
    ...mapState(['canPoll']),
    ...mapState(['voteId']),
    ...mapState(['themeId'])
  },
  data () {
    return {
      // list: [],
      info: '',
      show: '',
      imgUrl: 'static/img/player.png',
      result: [],
      tmp: [],
      status: false,
    }
  },
  methods: {
    ChangeColor (params, id, index, event) {
      let score = {cId: id, cScore: params}
      const target = event.target.style.background
      event.target.style.background = target=== 'rgb(204, 204, 204)'? '#00bcd4' : 'rgb(204, 204, 204)'
      if (event.target.style.background === 'rgb(204, 204, 204)') {
        this.result[index] = score
      } else if (event.target.style.background === 'rgb(0, 188, 212)') {
        this.result[index] = ''
      }
      let count = 0
      this.result.forEach((item) => {
        if (item) { count++ }
      })
      this.$emit('change', count)
    },
    handlelookClick (item, index) {
        console.log(this.listTitle.length - this.flen)
       console.log(index)
      if (index >= this.listTitle.length - this.flen) {
        // var url = 'http://192.168.43.188:8081/preview/' + item //要预览文件的访问地址,后端插件
        var url = 'http://192.168.43.188:8080/file/' + item
        // window.history.pushState('file', '', 'http://192.168.43.188:8012/onlinePreview?url='+encodeURIComponent(url))
        // window.open('http://192.168.43.188:8012/onlinePreview?url='+encodeURIComponent(url), '', 'width=400,height=300')
        // window.location = 'http://192.168.43.188:8012/onlinePreview?url='+encodeURIComponent(url)
         // shell.openExternal('http://39.105.11.140:8012/onlinePreview?url='+encodeURIComponent(url))
         // console.log(window.history)
         plus.runtime.openWeb('http://192.168.43.188:8012/onlinePreview?url='+encodeURIComponent(url))
      } else {
        return;
      }
    },
    handleVoteClick (params, id, index, event) {
      if (this.canPoll) {
        // console.log(this.result)
        if (this.result.length === 0 ||this.result[index] === undefined ||this.result[index].cScore === params || this.result[index] === '' ) {
          this.ChangeColor (params, id, index, event)
        } else {
          swal('您已选择，如有需要请取消后重新选择', '', 'warning')
        }
      } else {
        //  if (this.result.length === 0 ||this.result[index] === undefined ||this.result[index].cScore === params || this.result[index] === '' ) {
        //   this.ChangeColor (params, id, index, event)
        // } else {
        //   swal('您已选择，如有需要请取消后重新选择', '', 'warning')
        // }
        swal('查询到您可能存在着严重的刷票行为，请重启软件重新投票', '', 'error')
      }
    },
    handleSubmit () {
      const result2 = []
      this.result.forEach((item) => {
        if (item) {
          result2.push(item)
        }
      })
      axios.post('http://192.168.43.188:8081/subVoteResult', {
        'vid': this.voteId,
        // 'mode': this.schema,
        // 'vcid': this.themeId
        'arr': result2
      }).then(({status, data}) => {
        // console.log(data)
        if (data.msg === '成功完成投票') {
          swal('Info:' + data.msg, '', 'success')
          this.$router.push('/vote')
        } else{
          swal(data.msg, '', 'warning')
        }
      }).catch((error) => {
        swal('Info' + error, '', 'error')
      })
    },
    handleJudgeClick () {
      this.status = true
    },
    JudgeBlur (score, id, value, index, min, max) {
      // console.log(score)
      if (score.cScore >= min && score.cScore <= max && score.cId) {
        this.result[index] = score
        let count = 0
        this.result.forEach((item) => {
          if (item) { count++ }
        })
        this.$emit('change', count)
      } else {
        swal('亲，您输入的分数没有在' + min + '-' + max + '之间，请重新输入', '', 'error')
        this.tmp[index] = ''
      }
    },
    handleJudgeBlur (id, value, index) {
      if (this.status) {
        let score = {cId: id, cScore: value}
        if (this.schema === '00') {
          this.JudgeBlur (score, id, value, index, 0, 100)
        } else if (this.schema === '01') {
          this.JudgeBlur (score, id, value, index, 60, 100)
        } else if (this.schema === '02') {
          this.JudgeBlur (score, id, value, index, 80, 100)
        }
      }
        // console.log(this.result)
        this.status = false
      },
      handleSubClick () {
        axios.post('http://192.168.43.188:8081/subMarkResult', {
          'vid': this.voteId,
          'mode': this.schema,
          'arr': this.result
        }).then(({status, data}) => {
          // console.log(data)
          if (data.msg === '成功完成评分') {
            swal('Info:' + data.msg, '', 'success')
            this.$router.push('/vote')
          } else{
            swal(data.msg, '', 'warning')
          }
        }).catch((error) => {
          swal('Info' + error, '', 'error')
        })
    }
  },
  updated () {
    // this.$nextTick(() => {
    if (this.schema === '11') {
      this.show = true
      // console.log('投票模式')
    } else if (this.schema === '00') {
      this.show = false
      // console.log('评分模式0 - 100')
    } else if (this.schema === '01') {
      this.show = false
      // console.log('评分模式60 - 100')
    } else if (this.schema === '02') {
      this.show = false
      // console.log('评分模式80 - 100')
    }
  // })
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/variable.styl'
.list
    overflow: hidden
    // background: #31C9B1
    padding: 0rem
    .item-wrapper
        width: 33%
        float:left
        .item
            margin: .2rem
            padding: .2rem .1rem
            background: #fff
            position: relative
            font-family: STXingkai
            .item-img
                width: 100%
            .item-info
                padding: .1rem .15rem
            .item-button
                box-sizing: border-box
                background: $bgcolor
                line-height: .65rem
                font-size: .38rem
                color: #fff
                border-radius: .1rem
                width: 30%
                margin: .1rem 0 -.1rem 0
            .item-desc
                line-height: .6rem
                font-size: .38rem
                color: #777
                overflow: hidden
                white-space: nowrap
                text-overflow: ellipsis
                .item-desc-title
                  font-size: .3rem
                  font-family: STxingkai
            .item-no
                background: $yellow
                color: #665
                padding: .1rem
                border-radius: .02rem
                position: absolute
                top: 0
                left: 0
                font-size: .4rem
                opacity: .8
            .ipt
                margin-top: .5rem
                margin-right: .2rem
                border: .02rem solid #333
                width: 100%
                overflow: hidden
                box-sizing: border-box
                padding: .1rem .2rem
                font-weight: 300
                color: #666
                font-size: .40rem
                font-family: STLiti
            .ipt:focus
                border: $bgcolor .02rem solid
            .btn-info
                line-height: .6rem
                fonr-sizeL: .32rem
                color: red
.submit
    box-sizing: border-box
    background: $pink
    line-height: 1.5rem
    font-size: .38rem
    color: #fff
    border-radius: .1rem
    width: 100%
    margin: .1rem 0 -.1rem 0
    text-align: center
.list-bottom
    line-height: 1rem
    font-size: .38rem
    text-align: center
.file
    color: $green
input::-webkit-input-placeholder
    color:#bbb
</style>
